<template>
    <view class='page'>
        <!-- @leftClick='leftClick' -->
        <u-navbar class="gradient-bg" title="银行卡" navbarType="0" fontColor="#ffffff" gradient="linear-gradient(to bottom right, #2e996f, #3f99ab)"></u-navbar>
        <view class="empty" v-if="cardList.length==0">
            <u-empty mode="data" text="暂时还未绑定任何银行卡">
            </u-empty>
            <view class="addBtn">
                <!-- @click="goPage()" -->
                <button type="default" @click="addCard()">新增</button>
            </view>
        </view>
        <view class="cardList" v-else>
            <view class="list box">
                <view class="item" v-for="item,index in cardList" :key="index" @click="toDetail(item)" :style="{ backgroundColor: item.bank.color }">
                    <view class="pic">
                        <image :src="item.bank.logo" mode="widthFix" />
                    </view>
                    <view class="boxr">
                        <text class="name">{{ bankList.find(e=>e.id==item.bank_id)?bankList.find(e=>e.id==item.bank_id).name:'' }}</text>
                        <text class="num" v-if="item.card_number">{{formatBankCardNumber(item.card_number)}}</text>
                    </view>
                </view>
            </view>
            <view class="cell box">
                <u-cell-group :border="false">
                    <u-cell isLink :border="false" @click="addCard()">
                        <view slot="title" class="u-slot-title">
                            <u-icon name="plus" size="22"></u-icon>
                            <text class="u-cell-text">添加银行卡</text>
                        </view>
                    </u-cell>
                </u-cell-group>
            </view>
        </view>
        <u-modal :show="show" title="提示" content="已超出绑定的最大限制，请先解绑其他银行卡" @confirm="show=false" :asyncClose="true"></u-modal>
    </view>
</template>
<script>
import { getAccountLists, getBanksLists } from "@/api/withdrawal.js"
export default {
    components: {},
    data() {
        return {
            $imgUrl: this.$imgUrl,
            cardList: [],
            bankList: [],
            type: '',//1提现时选择银行卡过来添加
            form: {},
            show: false
        };
    },
    onLoad(query) {
        if (query) {
            this.type = query.type
        }
    },
    onShow() {
        uni.showLoading({
            title: '加载中'
        });
        let fun = [
            getBanksLists()
        ]
        Promise.all(fun).then(res => {
            this.bankList = res[0].data
            this.getList()
            setTimeout(() => {
                uni.hideLoading();
            }, 500);
        })
    },
    methods: {
        getList() {
            getAccountLists({ page: 1, limit: 999, is_show_hide: 0 }).then(res => {
                this.cardList = res.data.lists
            })
        },
        formatBankCardNumber(bankCardNumber) {
            const lengthCard = bankCardNumber.length;
            if (typeof bankCardNumber !== 'string' || lengthCard < 14) {
                return ''; // 返回空字符串或其他错误处理方式
            }
            const hiddenDigits = lengthCard - 8; // 隐藏的数字位数
            const hiddenStr = '*'.repeat(hiddenDigits); // 生成隐藏的星号字符串
            const visibleStr = bankCardNumber.slice(0, 4) + hiddenStr + bankCardNumber.slice(lengthCard - 4);
            return visibleStr;
        },
        toDetail(row) {
            console.log(row, "row")
            uni.navigateTo({
                url: "/pagesB/withdrawal/bindCard?data=" + encodeURIComponent(JSON.stringify(row))
            })
        },
        addCard() {
            if (this.cardList.length < 11) {
                uni.navigateTo({
                    url: "/pagesB/withdrawal/bindCard?type=1"
                })
            } else {
                this.show = true
            }
        }
        // leftClick() {
        //    console.log(11111111)
        // }
    },
};
</script>
<style scoped lang='scss'>
.page {
  height: 100vh;
  .empty {
    height: 60%;
    // padding-top: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .addBtn {
    position: fixed;
    bottom: 50rpx;
    left: 0;
    width: 100%;
    button {
      width: 650rpx;
      height: 90rpx;
      background-color: $base;
      border-radius: 6rpx;
      color: #ffffff;
      font-size: 32rpx;
      line-height: 90rpx;
    }
  }
  .cardList {
    padding-bottom: 30rpx;
    .list {
      padding: 20rpx 0;
      .item {
        // width: 100%;
        padding: 38rpx 40rpx;
        // height: 161rpx;
        overflow: hidden;
        // background-image: linear-gradient(90deg, #1bb28f 1%, #06917c 100%);
        border-radius: 5rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        .pic {
          width: 100rpx;
          height: 100rpx;
          background: #ffffff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          image {
            width: 80rpx;
          }
        }
        .boxr {
          width: 80%;
          display: flex;
          flex-direction: column;
          text {
            color: #ffffff;
          }
          .name {
            font-size: 29rpx;
          }
          .num {
            text-align: right;
            font-size: 43rpx;
            margin-top: 40rpx;
          }
        }
      }
    }

    .cell {
      background-color: #ffffff;
      .u-slot-title {
        @include flex;
        flex-direction: row;
        align-items: center;
      }

      .u-cell-text {
        font-size: 30rpxpx;
        line-height: 22px;
        color: #303133;
        padding-left: 10rpx;
      }
    }
  }
}
</style>